<!-- 订单管理 -->
<template>
  <div
    class="dashboard-container order-list customer-list-box"
  >
    <div
      class="app-container"
    >
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="waybillSearchFormData"
          :model="dataA"
          label-width="80px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="订单编号:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="dataA.id"
                  placeholder="请输入订单编号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="订单状态:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-select
                  v-model="dataA.status"
                  clearable
                  placeholder="请选择订单状态:"
                >
                  <el-option
                    v-for="item in orderStatuslist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="付费状态:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  v-model="dataA.paymentStatus"
                  clearable
                  placeholder="请选择付费状态:"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人姓名:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-input
                  v-model="dataA.receiverName"
                  placeholder="请输入发件人姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人电话:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-input
                  v-model="dataA.receiverPhone"
                  placeholder="请输入发件人电话"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              style="display: flex;justify-content: space-between;"
            >
              <el-form-item
                label="发件人地址:"
                style="margin-bottom: 20px;"
                label-width="110px"
              >
                <el-select
                  v-model="dataA.receiverProvinceId"
                  style="width: 32%;"
                  placeholder="请选择省"
                  clearable
                  @change="getCity"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  />
                </el-select>
                <el-select
                  v-model="dataA.receiverCityId"
                  style="width: 32%;"
                  clearable
                  placeholder="请选择市"
                  @change="getCounty"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  />
                </el-select>
                <el-select
                  v-model="dataA.receiverCountyId"
                  style="width: 32%;"
                  clearable
                  placeholder="请选择县/区"
                >
                  <el-option
                    v-for="item in countryList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="收件人姓名:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-input
                  v-model="sss"
                  placeholder="请输入收件人姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="收件人电话:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-input
                  v-model="dataA.senderPhone"
                  placeholder="请输入收件人电话"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              style="display: flex;justify-content: space-between;"
            >
              <el-form-item
                label="收件人地址:"
                style="margin-bottom: 20px;"
                label-width="110px"
              >
                <el-select
                  v-model="dataA.senderProvinceId"
                  style="width: 32%;"
                  placeholder="请选择省"
                  value-key="id"
                  clearable
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  />
                </el-select>
                <el-select
                  v-model="dataA.senderCityId"
                  style="width: 32%;"
                  clearable
                  placeholder="请选择市"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  />
                </el-select>
                <el-select
                  v-model="dataA.senderCountyId"
                  style="width: 32%;"
                  clearable
                  placeholder="请选择县/区"
                >
                  <el-option
                    v-for="item in countryList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              style="padding-left:50px"
            >
              <el-button
                type="warning"
                @click="handleFilter('查询')"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm('waybillSearchFormData')"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <div
      v-loading="listLoading"
      :class="{ 'loading-box': listLoading }"
      element-loading-text="加载中"
      style="margin: 20px;margin-top: 0px;"
    >
      <el-card
        shadow="never"
        class="table-card-box"
      >
        <el-table
          ref="[]"
          :data="List"
          fit
          style="width: 100%"
          stripe
          :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
        >
          <el-table-column
            align="left"
            type="index"
            label="序号"
            width="60"
          />
          <el-table-column
            prop="id"
            align="left"
            label="订单编号"
            min-width="160"
          />
          <el-table-column
            prop="memberId"
            align="left"
            label="运单编号"
            min-width="160"
          />
          <el-table-column
            prop="createTime"
            align="left"
            label="下单时间"
            min-width="160"
          />
          <el-table-column
            align="left"
            label="订单状态"
            min-width="160"
          >
            <template #default="scope">
              {{ Status(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="senderName"
            label="发件人姓名"
            min-width="160"
          />
          <el-table-column
            prop="senderPhone"
            align="left"
            label="发件人电话"
            min-width="160"
          />
          <el-table-column
            align="left"
            label="发件人地址"
            min-width="160"
          >
            <template #default="a">
              {{ a.row.senderProvince.name }}-{{ a.row.senderCity.name }}-{{ a.row.senderCounty.name }}
            </template>
          </el-table-column>
          <el-table-column
            prop="receiverName"
            align="left"
            label="收件人姓名"
            min-width="160"
          />
          <el-table-column
            prop="receiverPhone"
            align="left"
            label="收件人电话"
            min-width="160"
          />
          <el-table-column
            align="left"
            label="收件人地址"
            min-width="160"
          >
            <template #default="b">
              {{ b.row.receiverProvince.name }}-{{ b.row.receiverCity.name }}-{{ b.row.receiverCounty.name }}
            </template>
          </el-table-column>
          <el-table-column

            align="left"
            label="取件类型"
            min-width="160"
          >
            <template #default="obj">
              {{ obj.row.pickupType===1?'网点自寄':'上门取件' }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="付费类型"
            min-width="160"
          >
            <template #default="String">
              {{ String.row.paymentMethod===1?'预结':'到付' }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="付费状态"
            min-width="160"
          >
            <template #default="arr">
              {{ arr.row.paymentStatus===1?'未付':'已付' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="85"
          >
            <template #default="{row}">
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push(`/business/edit-order/?id=${row.id}`)"
              >查看详情</el-link>
            </template>
          </el-table-column>

        </el-table>
        <el-pagination
          :current-page="currentPage4"
          layout="->,prev, pager, next"
          :total="+total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>

      </el-card>
    </div>
  </div>
</template>
<script>
import { getOrderList } from '@/api/orderManage.js'
import orderStatusList from '@/api/orderstatus.json'
import area from '@/api/city.json'
export default {
  data() {
    return {
      sss: '',
      currentPage4: 1,
      total: '',
      listLoading: true,
      dataA: {
        paymentStatus: '',
        pickupType: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        senderPhone: '',
        senderProvinceId: '',
        status: '',
        page: 1,
        pageSize: 10,
        id: ''
      },
      List: [],
      orderStatuslist: [],
      statusList: [
        { id: 1, name: '未付' },
        { id: 2, name: '已付' }
      ],
      provinceList: [],
      cityList: [],
      countryList: []
    }
  },
  created() {
    this.getList()
    this.getArea()
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage4 = val
      this.dataA.page = this.currentPage4
      this.getList(this.dataA)
    },
    async getList() {
      this.listLoading = true
      const { data } = await getOrderList(this.dataA)
      this.listLoading = false
      this.List = data.items
      console.log(data)
      this.orderStatuslist = orderStatusList
      this.total = data.pages
    },
    Status(type) {
      const index = orderStatusList.findIndex(item => item.id === type)
      return orderStatusList[index].name
    },
    // 点击搜索
    handleFilter() {
      this.getList()
    },
    // 点击重置2
    resetForm() {
      this.dataA = {
        paymentStatus: '',
        pickupType: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        senderPhone: '',
        senderProvinceId: '',
        status: '',
        page: 1,
        pageSize: 10,
        id: ''
      }
      this.sss = ``
      this.getList()
    },
    getArea() {
      this.provinceList = area
    },
    getCity() {
      // this.cityList
      const d = area.find(item => item.areaId === this.dataA.receiverProvinceId)
      // console.log(d)
      this.cityList = d.cities
    },
    getCounty() {
      const q = this.cityList.find(item => item.areaId === this.dataA.receiverCityId)
      console.log(q)
      this.countryList = q.counties
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
